import type { Preview } from '@storybook/svelte-vite'
import { withThemeByDataAttribute } from '@storybook/addon-themes';
import { themes } from 'storybook/theming';
import i18n from 'storybook-i18n/preview';
import dayjs from 'dayjs';
import('dayjs/locale/zh-cn');


import '../src/lib/theme/theme.less';
import './example.less';

import { useLocal } from '../src/lib'
import { register, locale } from 'svelte-i18n';

import { addons, useGlobals } from 'storybook/preview-api'
import { LocaleDecorator } from './LocaleDecorator';

addons.getChannel().on('LOCALE_CHANGED', (newLocale) => {
    switchLocale(newLocale);
});


const switchLocale = (newLocale: string) => {
    locale.set(newLocale);
    // 切换全局语言为简体中文
    if (newLocale === 'zh-CN') {
        dayjs.locale('zh-cn');
    } else {
        dayjs.locale('en');
    }
}

useLocal('en-US');

let init = false;

register('en-US', () => import('./locales/en.json'))
register('zh-CN', () => import('./locales/zh.json'))

addons.getChannel().emit('LOCALE_CHANGED', 'en-US');

// @ts-ignore
const i18nDecorators = i18n?.decorators || [];
const preview: Preview = {
    ...i18n,
    initialGlobals: {
        locale: "en-US",
        locales: {
            'en-US': "English",
            'zh-CN': "简体中文",
        },
    },
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },

        a11y: {
            // 'todo' - show a11y violations in the test UI only
            // 'error' - fail CI on a11y violations
            // 'off' - skip a11y checks entirely
            test: 'todo'
        },
        parameters: {
            docs: {
                theme: themes.dark,
            },
        }
    },
    decorators: [
        withThemeByDataAttribute({
            themes: {
                light: 'light',
                dark: 'dark',
                pink: 'pink',
                purple: 'purple',
                violet: 'violet',
                red: 'red',
                indigo: 'indigo',
                cyan: 'cyan',
                teal: 'teal',
                green: 'green',
                lime: 'lime',
                yellow: 'yellow',
                amber: 'amber',
                orange: 'orange',
                grey: 'grey'
            },
            defaultTheme: 'light',
        }),
        ...i18nDecorators,
        LocaleDecorator
    ]
};

export default preview;